JavaScript Performans Optimizasyonu: Kod Bölme ve Tembel Değerlendirme Karşılaştırması

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Yükleniyor...
}>
        
      
    

Bu örnekte, OtherComponent yalnızca render edildiğinde yüklenir. Yüklenirken, kullanıcı "Yükleniyor..." mesajını görecektir.

Kod Bölme için Araçlar

• Webpack: Çeşitli kod bölme tekniklerini destekleyen popüler bir modül paketleyicisi.
• Rollup: Küçük, verimli paketler oluşturmaya odaklanan başka bir modül paketleyicisi.
• Parcel: Kod bölmeyi otomatik olarak yöneten sıfır yapılandırmalı bir paketleyici.
• Vite: Hızlı geliştirme ve optimize edilmiş üretim yapıları için yerel ES modüllerinden yararlanan bir yapı aracı.

Tembel Değerlendirme (Lazy Evaluation): Hesaplamayı Ertelemek

Tembel Değerlendirme Nedir?

Tembel değerlendirme (Lazy evaluation), ertelenmiş değerlendirme olarak da bilinir, bir ifadenin değerlendirmesinin değerine gerçekten ihtiyaç duyulana kadar ertelendiği bir programlama tekniğidir. Başka bir deyişle, hesaplamalar hevesli bir şekilde önceden yapılmak yerine, yalnızca sonuçları gerektiğinde gerçekleştirilir.

Çok çeşitli bir yemek hazırladığınızı hayal edin. Her yemeği aynı anda pişirmezsiniz. Bunun yerine, her yemeği sadece servis etme zamanı geldiğinde hazırlarsınız. Tembel değerlendirme de benzer şekilde çalışır, hesaplamaları yalnızca sonuçları gerektiğinde gerçekleştirir.

Tembel Değerlendirme Nasıl Çalışır?

JavaScript'te, tembel değerlendirme çeşitli teknikler kullanılarak uygulanabilir:

• Fonksiyonlar: Bir ifadeyi bir fonksiyona sarmak, değerlendirmesini fonksiyon çağrılana kadar ertelemenizi sağlar.
• Üreteçler (Generators): Üreteçler, isteğe bağlı olarak değerler üreten yineleyiciler oluşturmanın bir yolunu sunar.
• Notlandırma (Memoization): Notlandırma, maliyetli fonksiyon çağrılarının sonuçlarını önbelleğe almayı ve aynı girdiler tekrar oluştuğunda önbelleğe alınmış sonucu döndürmeyi içerir.
• Vekiller (Proxies): Vekiller, özellik erişimini engellemek ve özellik değerlerinin hesaplanmasını gerçekten erişilene kadar ertelemek için kullanılabilir.

Tembel Değerlendirmenin Faydaları

• İyileştirilmiş Performans: Gereksiz hesaplamaları erteleyerek, tembel değerlendirme performansı önemli ölçüde artırabilir, özellikle büyük veri setleri veya karmaşık hesaplamalarla uğraşırken.
• Azaltılmış Bellek Kullanımı: Tembel değerlendirme, hemen ihtiyaç duyulmayan ara değerlerin oluşturulmasını önleyerek bellek kullanımını azaltabilir.
• Artırılmış Yanıt Verme Hızı: İlk yükleme sırasında gereksiz hesaplamalardan kaçınarak, tembel değerlendirme uygulamanın yanıt verme hızını artırabilir.
• Sonsuz Veri Yapıları: Tembel değerlendirme, sonsuz listeler veya akışlar gibi sonsuz veri yapılarıyla çalışmanıza olanak tanır, çünkü yalnızca gerekli öğeleri isteğe bağlı olarak hesaplar.

Örnek: Görüntülerin Tembel Yüklenmesi (Lazy Loading)

Tembel değerlendirmenin yaygın bir kullanım durumu, görüntülerin tembel yüklenmesidir. Bir sayfadaki tüm görüntüleri baştan yüklemek yerine, başlangıçta görünüm alanında (viewport) görünmeyen görüntülerin yüklenmesini erteleyebilirsiniz. Bu, ilk sayfa yükleme süresini önemli ölçüde iyileştirebilir ve ağ bant genişliği tüketimini azaltabilir.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Bu örnek, bir görüntünün görünüm alanına ne zaman girdiğini tespit etmek için IntersectionObserver API'sini kullanır. Bir görüntü göründüğünde, src özelliği data-src özelliğinin değerine ayarlanır ve bu da görüntünün yüklenmesini tetikler. Gözlemci daha sonra görüntünün tekrar yüklenmesini önlemek için gözlemi durdurur.

Örnek: Notlandırma (Memoization)

Notlandırma (Memoization), maliyetli fonksiyon çağrılarını optimize etmek için kullanılabilir. İşte bir örnek:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Zaman alan bir hesaplamayı simüle et
  for (let i = 0; i < 100000000; i++) {
    // Bir şeyler yap
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('İlk çağrı');
console.log(memoizedCalculation(5)); // İlk çağrı - zaman alır
console.timeEnd('İlk çağrı');

console.time('İkinci çağrı');
console.log(memoizedCalculation(5)); // İkinci çağrı - önbelleğe alınmış değeri anında döndürür
console.timeEnd('İkinci çağrı');

Bu örnekte, memoize fonksiyonu girdi olarak bir fonksiyon alır ve bu fonksiyonun notlandırılmış (memoized) bir versiyonunu döndürür. Notlandırılmış fonksiyon, önceki çağrıların sonuçlarını önbelleğe alır, böylece aynı argümanlarla yapılan sonraki çağrılar, orijinal fonksiyonu yeniden çalıştırmadan önbelleğe alınmış sonucu döndürebilir.

Kod Bölme ve Tembel Değerlendirme: Temel Farklılıklar

Hem kod bölme hem de tembel değerlendirme güçlü optimizasyon teknikleri olsa da, performansın farklı yönlerini ele alırlar:

• Kod Bölme: Kodu daha küçük parçalara ayırarak ve isteğe bağlı olarak yükleyerek ilk paket boyutunu azaltmaya odaklanır. Öncelikle ilk sayfa yükleme süresini iyileştirmek için kullanılır.
• Tembel Değerlendirme: Değerlerin hesaplanmasını gerçekten ihtiyaç duyulana kadar ertelemeye odaklanır. Öncelikle maliyetli hesaplamalarla veya büyük veri setleriyle uğraşırken performansı iyileştirmek için kullanılır.

Özünde, kod bölme baştan indirilmesi gereken kod miktarını azaltırken, tembel değerlendirme baştan yapılması gereken hesaplama miktarını azaltır.

Kod Bölme ve Tembel Değerlendirmeyi Ne Zaman Kullanmalı

Kod Bölme

• Büyük Uygulamalar: Çok miktarda JavaScript kodu olan uygulamalar, özellikle birden fazla rota veya özelliğe sahip olanlar için kod bölmeyi kullanın.
• İlk Yükleme Süresini İyileştirme: İlk sayfa yükleme süresini iyileştirmek ve etkileşime geçme süresini azaltmak için kod bölmeyi kullanın.
• Ağ Bant Genişliğini Azaltma: Ağ üzerinden aktarılması gereken veri miktarını azaltmak için kod bölmeyi kullanın.

Tembel Değerlendirme

• Maliyetli Hesaplamalar: Maliyetli hesaplamalar yapan veya büyük veri setlerine erişen fonksiyonlar için tembel değerlendirmeyi kullanın.
• Yanıt Verme Hızını İyileştirme: İlk yükleme sırasında gereksiz hesaplamaları erteleyerek uygulamanın yanıt verme hızını iyileştirmek için tembel değerlendirmeyi kullanın.
• Sonsuz Veri Yapıları: Sonsuz listeler veya akışlar gibi sonsuz veri yapılarıyla çalışırken tembel değerlendirmeyi kullanın.
• Medyayı Tembel Yükleme: Sayfa yükleme sürelerini iyileştirmek için resimler, videolar ve diğer medya varlıkları için tembel yüklemeyi uygulayın.

Kod Bölme ve Tembel Değerlendirmeyi Birleştirmek

Birçok durumda, kod bölme ve tembel değerlendirme daha da büyük performans kazanımları elde etmek için birleştirilebilir. Örneğin, uygulamanızı daha küçük parçalara ayırmak için kod bölmeyi kullanabilir ve ardından bu parçalar içindeki değerlerin hesaplanmasını ertelemek için tembel değerlendirmeyi kullanabilirsiniz.

Bir e-ticaret uygulamasını düşünün. Uygulamayı ürün listeleme sayfası, ürün detayları sayfası ve ödeme sayfası için ayrı paketlere ayırmak üzere kod bölmeyi kullanabilirsiniz. Ardından, ürün detayları sayfası içinde, görüntülerin yüklenmesini veya ürün önerilerinin hesaplanmasını gerçekten ihtiyaç duyulana kadar ertelemek için tembel değerlendirmeyi kullanabilirsiniz.

Kod Bölme ve Tembel Değerlendirmenin Ötesinde: Ek Optimizasyon Teknikleri

Kod bölme ve tembel değerlendirme güçlü teknikler olsa da, JavaScript performans optimizasyonu söz konusu olduğunda bulmacanın sadece iki parçasıdır. Performansı daha da iyileştirmek için kullanabileceğiniz bazı ek teknikler şunlardır:

• Küçültme (Minification): Boyutunu azaltmak için kodunuzdan gereksiz karakterleri (ör. boşluk, yorumlar) kaldırın.
• Sıkıştırma (Compression): Boyutunu daha da azaltmak için kodunuzu Gzip veya Brotli gibi araçlarla sıkıştırın.
• Önbelleğe Alma (Caching): Sunucunuza yapılan istek sayısını azaltmak için tarayıcı önbelleğinden ve CDN önbelleğinden yararlanın.
• Ağaç Sarsma (Tree Shaking): Boyutlarını azaltmak için paketlerinizden kullanılmayan kodu kaldırın.
• Görüntü Optimizasyonu: Görüntüleri sıkıştırarak, uygun boyutlara yeniden boyutlandırarak ve WebP gibi modern görüntü formatlarını kullanarak optimize edin.
• Debouncing ve Throttling: Performans sorunlarını önlemek için olay işleyicilerinin yürütülme hızını kontrol edin.
• Verimli DOM Manipülasyonu: DOM manipülasyonlarını en aza indirin ve verimli DOM manipülasyon teknikleri kullanın.
• Web Workers: Ana iş parçacığını engellemelerini önlemek için hesaplama açısından yoğun görevleri web worker'lara devredin.

Sonuç

JavaScript performans optimizasyonu, olumlu bir kullanıcı deneyimi sunmanın ve iş hedeflerine ulaşmanın kritik bir yönüdür. Kod bölme ve tembel değerlendirme, ilk yükleme sürelerini azaltarak, ağ bant genişliği tüketimini düşürerek ve gereksiz hesaplamaları erteleyerek performansı önemli ölçüde artırabilen iki güçlü tekniktir. Bu tekniklerin nasıl çalıştığını ve ne zaman kullanılacağını anlayarak, daha hızlı, daha duyarlı ve daha keyifli web uygulamaları oluşturabilirsiniz.

Özel uygulama gereksinimlerinizi göz önünde bulundurmayı ve ihtiyaçlarınıza en uygun teknikleri kullanmayı unutmayın. Mümkün olan en iyi kullanıcı deneyimini sunduğunuzdan emin olmak için uygulamanızın performansını sürekli olarak izleyin ve optimizasyon stratejilerinizi yineleyin. Yalnızca zengin özelliklere sahip değil, aynı zamanda performanslı ve dünya çapında kullanımı keyifli web uygulamaları oluşturmak için kod bölme ve tembel değerlendirmenin gücünden yararlanın.

Daha Fazla Öğrenme Kaynağı

• Webpack Dokümantasyonu: https://webpack.js.org/
• Rollup Dokümantasyonu: https://rollupjs.org/guide/en/
• Vite Dokümantasyonu: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - JavaScript Yürütmesini Optimize Etme: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/